<template>
  <div class="section">
    <div class="dialogContent">
      <div class="title">
        <div class="titleWrap">
					<span>
						<img src="../../assets/img/云商蓝.png" width="auto" height="100%" alt="云商"/>
					</span>
					<slot name="title"></slot>
				</div>
				<i class="el-icon-close close" @click="closeDialog('close')"></i>
			</div>
			<slot name="content"></slot>
		</div>
	</div>
</template>

<script>
	export default {
		methods:{
			closeDialog(val){
				this.$store.commit('newShowDialog',val);
			}
		}
	}
</script>

<style scoped>
  .section {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    background: rgba(0, 0, 0, .2);
    z-index: 999999;
  }

  .dialogContent {
    position: absolute;
    top: 80px;
    left: 0;
    right: 0;
    margin: auto;
    width: 610px;
    background: #fff;
    box-shadow: 0 0 10px #000;
    padding: 5px;
  }

  .title {
    position: relative;
    height: 100px;
    width: 100%;
    border-bottom: 1px solid #c9c9c9;
  }

  .titleWrap {
    position: absolute;
    top: 30px;
    left: 50%;
    transform: translate(-50%, 0);
  }

  .titleWrap span {
    display: inline-block;
    font-size: 20px;
    vertical-align: middle;
    cursor: default;
  }

  .title i.close {
    position: absolute;
    right: 5px;
    top: 5px;
    cursor: pointer;
    transition: .2s;
  }

  .title i.close:hover {
    color: red;
  }
</style>
